<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试模态框功能</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        .modal {
            z-index: 9999 !important;
        }
        .modal-backdrop {
            z-index: 9998 !important;
        }
        .test-info {
            background: #f8f9fa;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
            border-left: 4px solid #007bff;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="test-info">
            <h3>模态框功能测试</h3>
            <p>点击下面的按钮测试创建项目模态框是否能正常操作：</p>
            <ul>
                <li>模态框是否能正常打开</li>
                <li>Quill编辑器是否能正常输入</li>
                <li>表单字段是否能正常填写</li>
                <li>图片预览是否正常工作</li>
            </ul>
        </div>
        
        <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#testModal">
            测试创建项目模态框
        </button>
        
        <div id="debug-info" class="mt-3 p-3 bg-light border rounded">
            <h5>调试信息：</h5>
            <div id="debug-output"></div>
        </div>
    </div>

    <!-- 测试模态框 -->
    <div class="modal fade" id="testModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建新项目 - 测试版</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="test-project-name" class="form-label">项目名称</label>
                            <input type="text" class="form-control" id="test-project-name" placeholder="输入项目名称">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">项目介绍</label>
                            <div id="test-editor" style="height: 150px;"></div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="test-image" class="form-label">项目主图</label>
                            <input type="file" class="form-control" id="test-image" accept="image/*">
                            <div id="test-image-preview" class="mt-2" style="display: none;">
                                <img id="test-preview-img" src="" alt="预览" class="img-thumbnail" style="max-width: 200px;">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">测试字段</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="test-field1">
                                <label class="form-check-label" for="test-field1">测试字段1</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="test-field2">
                                <label class="form-check-label" for="test-field2">测试字段2</label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="test-create-btn">测试创建</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        let testQuill;
        const debugOutput = document.getElementById('debug-output');
        
        function addDebugInfo(message) {
            const time = new Date().toLocaleTimeString();
            debugOutput.innerHTML += `<div>[${time}] ${message}</div>`;
        }
        
        // 监听模态框显示事件
        document.getElementById('testModal').addEventListener('show.bs.modal', function() {
            addDebugInfo('模态框开始显示');
            
            // 初始化Quill编辑器
            if (!testQuill) {
                try {
                    testQuill = new Quill('#test-editor', {
                        theme: 'snow',
                        placeholder: '请输入项目介绍...',
                        modules: {
                            toolbar: [
                                ['bold', 'italic', 'underline'],
                                ['link'],
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                                ['clean']
                            ]
                        }
                    });
                    addDebugInfo('Quill编辑器初始化成功');
                } catch (error) {
                    addDebugInfo('Quill编辑器初始化失败: ' + error.message);
                }
            }
        });
        
        document.getElementById('testModal').addEventListener('shown.bs.modal', function() {
            addDebugInfo('模态框显示完成');
        });
        
        // 图片预览功能
        document.getElementById('test-image').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('test-preview-img').src = e.target.result;
                    document.getElementById('test-image-preview').style.display = 'block';
                    addDebugInfo('图片预览加载成功');
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 测试创建按钮
        document.getElementById('test-create-btn').addEventListener('click', function() {
            const projectName = document.getElementById('test-project-name').value;
            const description = testQuill ? testQuill.root.innerHTML : '编辑器未初始化';
            
            addDebugInfo(`测试创建项目: 名称="${projectName}", 描述长度=${description.length}字符`);
            
            if (projectName.trim()) {
                addDebugInfo('✅ 表单验证通过');
            } else {
                addDebugInfo('❌ 项目名称不能为空');
            }
        });
        
        addDebugInfo('页面加载完成，等待用户操作...');
    </script>
</body>
</html>